<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>{{$t('股票')}}</header-view>
		<view class="content">
			<view class="nav flex">
				<view class="nav_item" :class="type==1?'active_nav':''" @tap="changeType(1)">{{$t('股票')}}<view class="inner">
					</view>
				</view>
				<view class="nav_item" :class="type==2?'active_nav':''" @tap="changeType(2)">{{$t('已购买')}}<view class="inner">
					</view>
				</view>
			</view>
			<scroll-view scroll-y @scrolltolower="scrollBottom" class="list">
				<view class="list_header flex">
					<view class="title_item">{{$t('名称')}}</view>
					<view class="title_item" v-if="type==1">{{$t('购买价格')}}</view>
					<view class="title_item" v-if="type==1">{{$t('股票编码')}}</view>
					<view class="title_item" v-if="type==2">{{$t('价格')}}</view>
					<view class="title_item" v-if="type==2">{{$t('数量')}}</view>
					<view class="title_item" v-if="type==2">{{$t('成交数量')}}</view>
					<view class="title_item" v-if="type==2">{{$t('状态')}}</view>
				</view>
				<view class="list_content">
					<view class="item flex" @tap="toBuy(item)" v-for="item in list">
						<view class="i_item name" v-if="type==1">{{item.name}}</view>
						<view class="i_item name" v-if="type==2">
							{{item.pro_name}}
							<view class="code">{{item.pro_code}}</view>
						</view>
						<view class="i_item buy_price" v-if="type==1">{{item.price}}</view>
						<view class="i_item code_name" v-if="type==1">{{item.code}}</view>
						<view class="i_item buy_price" v-if="type==2">{{item.buy_price}}</view>
						<view class="i_item piece" v-if="type==2">{{item.buy_num}}</view>
						<view class="i_item volume" v-if="type==2">{{item.yes_num}}</view>
						<view class="i_item status" v-if="type==2">{{item.status_str}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup mode="bottom" :show="show" @close="show=false">
			<view class="mask">
				<view class="mask_title">
					<text>{{activeOpt.name}}</text>/<text>{{activeOpt.code}}</text>
				</view>
				<view class="mask_content">
					<view class="detail">
						<text class="name">{{$t('购买价格')}}</text>
						<text clsss="data">{{activeOpt.price*amount}}</text>
					</view>
					<view class="detail">
						<text class="name">{{$t('持有数量')}}</text>
						<text clsss="data">{{amount}}</text>
					</view>
					<view class="detail flex input_box">
						<text class="name">{{$t('购买数量')}}</text>
						<u--input class="input" :placeholder="$t('请设置数量')" border="none" v-model="amount" type="number"
							placeholderStyle="{color:'#a4a4af'}"
							:customStyle="{background: '#1f2039',paddingLeft:'24rpx'}" color="#fff"></u--input>
					</view>
					<u-button class="submit" :text="$t('提交')" @tap="submit"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		qiangListApi,
		qiangOrderListApi,
		qiangAddorderApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				type: 1,
				show: false,
				amount: "", //购买数量
				page: 1,
				total: 0,
				list: [],
				activeOpt: {}
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			scrollBottom() {
				console.log("滚动到底部")

				if (this.total == this.list.length) {
					uni.$u.toast(this.$t('加载完毕'))
					return
				}
				this.page++
				if (this.type == 1) {
					qiangListApi({
						page: this.page
					}).then(res => {
						this.list = [...this.list, ...res.data.data.data]
					})
				} else {
					qiangOrderListApi({
						page: this.page
					}).then(res => {
						this.list = [...this.list, ...res.data.data.data]
					})
				}
			},
			getList() {
				qiangListApi({
					page: this.page
				}).then(res => {
					console.log(res.data.data)
					this.total = res.data.data.total
					this.list = res.data.data.data
				})
			},
			getOrderList() {
				qiangOrderListApi({
					page: this.page
				}).then(res => {
					console.log(res.data.data)
					this.total = res.data.data.total
					this.list = res.data.data.data
				})
			},
			changeType(key) {
				if (this.type == key) {
					return
				}
				this.page = 1
				this.list = []
				this.type = key
				if (key == 1) {
					this.getList()
				} else {
					this.getOrderList()
				}
			},
			toBuy(opt) {
				if (this.type == 2) {
					return
				}
				this.show = true
				this.activeOpt = opt
			},
			// 购买股票
			submit() {
				qiangAddorderApi({
					id: this.activeOpt.id,
					buy_zhang: this.amount
				}).then(res => {
					uni.$u.toast(res.data.msg)
					this.show = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding: 0;

		.content {
			flex: 1;
			overflow: auto;
			display: flex;
			flex-direction: column;

			.nav {
				height: 80rpx;
				padding: 0 40rpx;
				background-color: #0a0b24;
				position: sticky;
				top: 0;
				margin-bottom: 40rpx;
				z-index: 9;

				.nav_item {
					flex: 1;
					font-size: 28rpx;
					text-align: center;
					line-height: 80rpx;
					font-weight: 400;
					color: #a4a4af;
					position: relative;

					.inner {
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 46rpx;
						height: 8rpx;
						background: transparent;
						border-radius: 4rpx;
					}
				}

				.active_nav {
					color: #9984dc;

					.inner {
						background: #9984dc;
					}
				}
			}

			.list {
				flex: 1;
				overflow: auto;

				.list_header {
					height: 66rpx;
					background: #1d1e44;
					border-radius: 10rpx;
					margin: 0 24rpx;

					.title_item {
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #6353a3;
						text-align: center;
						line-height: 66rpx;
					}
				}

				.list_content {
					.item {
						border-bottom: 2rpx solid #151630;
						margin: 0 24rpx;
						padding: 24rpx 0;

						.i_item {
							flex: 1;
							font-size: 30rpx;
							font-weight: 400;
							color: #d7d7e9;
							text-align: center;
						}

						.name {
							text-align: start;

							.code {
								font-size: 20rpx;
								font-weight: 400;
								color: #6a6a71;
								margin-top: 6rpx;
								width: 100%;
								text-align: start;
							}
						}

						.buy_price {
							font-size: 32rpx;
							font-weight: 400;
							color: #f53e3e;
						}
					}
				}
			}
		}

		.mask {
			background: #12132d;
			padding: 20rpx 20rpx 80rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: 400;

			.mask_title {
				line-height: 80rpx;


				text-align: center;
			}

			.mask_content {
				.detail {
					height: 70rpx;
					line-height: 70rpx;

					.name {
						color: #a4a4af;
						padding-right: 30rpx;
					}
				}

				.input_box {
					height: 80rpx;
					line-height: 80rpx;

					.name {
						flex: 1;
					}

					.input {
						flex: 1;
						height: 100%;
						line-height: 80rpx;
					}
				}

				.submit {
					height: 88rpx;
					background: #4c3d89;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #fff;
					margin-top: 66rpx;
					border: none;
				}
			}
		}
	}
</style>